<template>
  <div v-horizontal-screen="obj" class="horizontalScreen-demo-wrap1">
    <kb-scroll-view
      style="
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: auto;
      "
      behavior="dom"
      :rotate="90"
    >
      <div>
        <h2>KeyboardAwareScrollView components is scrollBox</h2>
        <kb-input v-model="mixValue" placeholder="Any string" />

        <p>
          请滚到底部 scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <p>
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!! scrollToBottom!!!!!!!!!!!
          scrollToBottom!!!!!!!!!!!
        </p>
        <kb-input v-model="mixValue" placeholder="Any string" />
      </div>
    </kb-scroll-view>
    <kb-board :emojiMap="emoji" :rotate="90" />
  </div>
</template>

<script>
import { person, hearts, symbo } from "../dev/enumerate/emojiImages";
export default {
  name: "KeyboardAwareScrollView1",
  data() {
    return {
      emoji: {
        person,
        hearts,
        symbo,
      },
      mixValue: `hello,world!!`,
      obj: {
        width: 2001,
        height: 1125,
        cssVar: "hs-var",
        times: 3,
        adaptedCallback: "adaptedCallback", //Replace  window’s event hsAdapt
      },
    };
  },
  methods: {
    submitFn(val) {
      console.log("input 的submit事件", val);
    },
    showStatus(data) {
      console.log("监听键盘显示隐藏", data);
    },
    inputFn({ el, value }) {
      console.log("input", el, value);
    },
    focusFn({ el, value }) {
      console.log("focus", el, value);
    },
    blurFn({ el, value }) {
      console.log("blur", el, value);
    },
  },
};
</script>

<style lang="scss">
.horizontalScreen-demo-wrap1 {
  position: absolute;
  overflow: auto;
  left: 0;
  top: 0;
  .inner-wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    padding: 20px;
    li {
      &:nth-child(odd) {
        background: pink;
      }
    }
  }
}
</style>
